<template>
    <div class="login">
        <div class="demo_login">
            <el-input v-model="User.username" clearable placeholder="请输入用户名" class="el_input"></el-input>
            <el-input v-model="User.password" show-password clearable placeholder="请输入密码" class="el_input"></el-input>
            <el-button type="primary" class="but_login" @click="LoginFun">登录</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            User: {
                username: '',
                password: '',
                name: '曾宪煌',
                duty: 'student',
                message: 'Log in success!',
                phone: 15779025059,
                adder: '广东省广州市天河区',
                src:'https://pic2.zhimg.com/v2-1295f26bcbc1a954caf1af6a6d045d31_r.jpg?source=1940ef5c'
            }
        }
    },
    mounted() {
        this.clearlocal()
    },
    methods: {
        clearlocal() {
            localStorage.clear()
        },
        LoginFun() {
            if (this.User.username == 'admin' && this.User.password == '123456') {
                localStorage.setItem('token', 'Bearer' + ' ' + 'evsandbgudnlaueglsdlfjdslgndunsgjsljfdkghlsdflkdjf192')
                localStorage.setItem('User', JSON.stringify(this.User))
                const menus = JSON.parse(JSON.stringify(this.$router.options.routes[1].children))
                localStorage.setItem('User_Menu', JSON.stringify(menus))
                localStorage.setItem('active', 0)
                // localStorage.setItem('token', 'Bearer'+' '+ localStorage.getItem('token'))//1.创建一个变量保存token的对象
                // this.$store.commit('SET_TOKEN', 'Bearer'+ localStorage.getItem('token'))//2.将变量
                // this.$store.commit('SET_USERNAME', this.username)//3.将变量存储在store中的用户名变
                this.$router.push(menus[0].path)
            } else if (this.User.username != 'admin') {
                this.$message.error('用户名错误')
            } else if (this.User.password != '123456') {
                this.$message.error('密码错误')
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.login {
    // box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    background: url(../../assets/bg.jpg) no-repeat;
    background-size: 100% 100vh;

    .demo_login {
        width: 20%;
        // height: 260px;
        background-color: rgba(255, 255, 255, 0.2);
        position: absolute;
        bottom: 100px;
        right: 100px;
        text-align: center;
        padding: 20px;
    }

    .el_input:nth-child(2) {
        margin: 20px 0;
    }

    .but_login {
        margin: 20px 0;
    }
}
</style>